<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
创建一个小黑记事本，可以添加，可以删除，显示数量，清空所有
-->

<body>
    <div id="app">
        <div>
            <input type="text" placeholder="请输入任务" v-model="work" v-on:keyup.enter="add">
            <button v-on:click="add">添加</button>
            <hr>
            <ul>
                <li v-for="(item,index) in daiban" :key="item.id">{{index+1}}-{{item.name}} <button
                        @click="remove(item.id)">x</button></li>
            </ul>
            <hr>
            <div v-show="daiban.length > 0">
                <p>当前任务合计：{{daiban.length}}</p>
                <button v-on:click="clearWork()">清空任务</button>
            </div>
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                daiban: [],
                work: '',
                index: 0
            },
            methods: {
                add() {
                    if (this.work != '') {
                        // 当前时间的时间戳
                        this.daiban.push({ id: +new Date(), name: this.work })
                        this.work = ''
                    }
                },
                remove(id) {
                    this.daiban = this.daiban.filter(item => item.id != id)
                },
                clearWork() {
                    this.daiban = []
                }
            }
        })
    </script>

</body>

</html>